<template>
  <div class="input-add">
    <input
      type="text"
      name="todo"
      v-model="todoContent"
      @keyup.enter="emitAddTodo"
    />
    <button @click="emitAddTodo">
      <i class="plus"></i>
    </button>
  </div>
</template>

<script setup>
import { ref } from "vue";
const props = defineProps({
  tid: Number,
});
const emit = defineEmits(["addTodo"]);

const { todoContent, emitAddTodo } = useEmitAddTodo(props.tid);

function useEmitAddTodo(tid) {
  const todoContent = ref("");

  const emitAddTodo = () => {
    const todo = {
      id: tid,
      content: todoContent.value,
      completed: false,
    };
    emit("addTodo", todo);
    todoContent.value = "";
  };

  return {
    todoContent,
    emitAddTodo,
  };
}
</script>

<style scoped></style>
